<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="vue_dev.js"></script>
	<script src="axios.min.js"></script>
	
	<script src="jquery-3.3.1.min.js"></script>	
</head>

<body>
	<div id="app">
		<h1>菜单</h1>
		<input type="text" id="name" placeholder="班名">
		<input type="text" id="count" placeholder="人数">
		<input type="submit"  value="添加" v-on:click="create">
		<div v-for="(test_class,index) in info">
			{{ test_class.name }} {{ test_class.count }} 
			
			<a v-on:click="del(index) " href="#">删除</a>
			<a target="_Blank" v-bind:href="'edit.html?name='+test_class.name+'&count='+test_class.count+'&id='+index">编辑</a>
		</div>

	</div>

	<script>
		var app = new Vue({
			el: '#app',
			data() {
				return {
					info: null
				}
			},
			methods:{
				del:function(index){
					axios
					.delete('http://127.0.0.1/RESTful/class/'+index)
					.then(response => (this.info = response.data))
					.catch(error => {
						console.log(error)
					})
				},
				create:function () {
					var name = $("#name").val();
					var count= $("#count").val();
					axios
					.post("http://127.0.0.1/RESTful/class?name="+name+"&count="+count)
					.then(response => (this.info = response.data))
					.catch(error => {
						console.log(error)
					})
				}	
				
			},
			filters: {
				currencydecimal(value) {
					return value.toFixed(2)
				}
			},
			mounted() {
				axios
				.get('http://127.0.0.1/RESTful/class')
				.then(response => (this.info = response.data))
				.catch(error => {
					console.log(error)
				})
			}
		});


	</script>
</body>

</html>